// Color Variables
@primary-50: #eff6ff;
@primary-100: #dbeafe;
@primary-200: #bfdbfe;
@primary-300: #93c5fd;
@primary-400: #60a5fa;
@primary-500: #3b82f6;
@primary-600: #2563eb;
@primary-700: #1d4ed8;
@primary-800: #1e40af;
@primary-900: #1e3a8a;
@primary-950: #172554;

// Theme Colors
@primary-color: @primary-500;
@primary-color-dark: @primary-600;
@primary-color-light: @primary-400;

@background-color: #f8fafc;
@background-color-light: #ffffff;

@text-color: #1f2937;
@text-color-secondary: #6b7280;
@text-color-light: #9ca3af;

@white: #ffffff;
@black: #000000;

@border-color: #e5e7eb;
@border-color-dark: #d1d5db;

@gray-50: #f9fafb;
@gray-100: #f3f4f6;
@gray-200: #e5e7eb;
@gray-300: #d1d5db;
@gray-400: #9ca3af;
@gray-500: #6b7280;
@gray-600: #4b5563;
@gray-700: #374151;
@gray-800: #1f2937;
@gray-900: #111827;
@gray-950: #030712;

@success-50: #f0fdf4;
@success-100: #dcfce7;
@success-200: #bbf7d0;
@success-300: #86efac;
@success-400: #4ade80;
@success-500: #22c55e;
@success-600: #16a34a;
@success-700: #15803d;
@success-800: #166534;
@success-900: #14532d;

@warning-50: #fffbeb;
@warning-100: #fef3c7;
@warning-200: #fde68a;
@warning-300: #fcd34d;
@warning-400: #fbbf24;
@warning-500: #f59e0b;
@warning-600: #d97706;
@warning-700: #b45309;
@warning-800: #92400e;
@warning-900: #78350f;

@error-50: #fef2f2;
@error-100: #fee2e2;
@error-200: #fecaca;
@error-300: #fca5a5;
@error-400: #f87171;
@error-500: #ef4444;
@error-600: #dc2626;
@error-700: #b91c1c;
@error-800: #991b1b;
@error-900: #7f1d1d;

// Additional color variables for semantic consistency
@red-50: #fef2f2;
@red-100: #fee2e2;
@red-200: #fecaca;
@red-300: #fca5a5;
@red-400: #f87171;
@red-500: #ef4444;
@red-600: #dc2626;
@red-700: #b91c1c;
@red-800: #991b1b;
@red-900: #7f1d1d;

@blue-50: #eff6ff;
@blue-100: #dbeafe;
@blue-200: #bfdbfe;
@blue-300: #93c5fd;
@blue-400: #60a5fa;
@blue-500: #3b82f6;
@blue-600: #2563eb;
@blue-700: #1d4ed8;
@blue-800: #1e40af;
@blue-900: #1e3a8a;

@green-50: #f0fdf4;
@green-100: #dcfce7;
@green-200: #bbf7d0;
@green-300: #86efac;
@green-400: #4ade80;
@green-500: #22c55e;
@green-600: #16a34a;
@green-700: #15803d;
@green-800: #166534;
@green-900: #14532d;

@yellow-50: #fffbeb;
@yellow-100: #fef3c7;
@yellow-200: #fde68a;
@yellow-300: #fcd34d;
@yellow-400: #fbbf24;
@yellow-500: #f59e0b;
@yellow-600: #d97706;
@yellow-700: #b45309;
@yellow-800: #92400e;
@yellow-900: #78350f;

@purple-50: #faf5ff;
@purple-100: #f3e8ff;
@purple-200: #e9d5ff;
@purple-300: #d8b4fe;
@purple-400: #c084fc;
@purple-500: #a855f7;
@purple-600: #9333ea;
@purple-700: #7c3aed;
@purple-800: #6b21a8;
@purple-900: #581c87;

@pink-50: #fdf2f8;
@pink-100: #fce7f3;
@pink-200: #fbcfe8;
@pink-300: #f9a8d4;
@pink-400: #f472b6;
@pink-500: #ec4899;
@pink-600: #db2777;
@pink-700: #be185d;
@pink-800: #9d174d;
@pink-900: #831843;

@indigo-50: #eef2ff;
@indigo-100: #e0e7ff;
@indigo-200: #c7d2fe;
@indigo-300: #a5b4fc;
@indigo-400: #818cf8;
@indigo-500: #6366f1;
@indigo-600: #4f46e5;
@indigo-700: #4338ca;
@indigo-800: #3730a3;
@indigo-900: #312e81;

@orange-50: #fff7ed;
@orange-100: #ffedd5;
@orange-200: #fed7aa;
@orange-300: #fdba74;
@orange-400: #fb923c;
@orange-500: #f97316;
@orange-600: #ea580c;
@orange-700: #c2410c;
@orange-800: #9a3412;
@orange-900: #7c2d12;

@cyan-50: #ecfeff;
@cyan-100: #cffafe;
@cyan-200: #a5f3fc;
@cyan-300: #67e8f9;
@cyan-400: #22d3ee;
@cyan-500: #06b6d4;
@cyan-600: #0891b2;
@cyan-700: #0e7490;
@cyan-800: #155e75;
@cyan-900: #164e63;

// Layout Variables
@sidebar-width: 280px;
@header-height: 64px;
@border-radius: 8px;
@border-radius-lg: 12px;
@border-radius-xl: 16px;
@border-radius-sm: 6px;
@border-radius-xs: 4px;

// Screen Breakpoints
@screen-sm: 640px;
@screen-md: 768px;
@screen-lg: 1024px;
@screen-xl: 1280px;
@screen-2xl: 1536px;

// Utility Functions
.fade(@color, @opacity) {
  fade(@color, @opacity);
}

// Truncate mixin
.truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Spacing
@spacing-xs: 4px;
@spacing-sm: 8px;
@spacing-md: 16px;
@spacing-lg: 24px;
@spacing-xl: 32px;
@spacing-2xl: 48px;

// Typography
@font-family:
  'Inter',
  system-ui,
  -apple-system,
  sans-serif;
@font-family-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'monospace';
@font-size-xs: 12px;
@font-size-sm: 14px;
@font-size-base: 16px;
@font-size-lg: 18px;
@font-size-xl: 20px;
@font-size-2xl: 24px;
@font-size-3xl: 30px;

// Shadows
@shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@shadow-md:
  0 4px 6px -1px rgb(0 0 0 / 0.1),
  0 2px 4px -2px rgb(0 0 0 / 0.1);
@shadow-lg:
  0 10px 15px -3px rgb(0 0 0 / 0.1),
  0 4px 6px -4px rgb(0 0 0 / 0.1);
@shadow-xl:
  0 20px 25px -5px rgb(0 0 0 / 0.1),
  0 8px 10px -6px rgb(0 0 0 / 0.1);

// Transitions
@transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
@transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
@transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

// Z-index
@z-dropdown: 1000;
@z-sticky: 1020;
@z-fixed: 1030;
@z-modal-backdrop: 1040;
@z-modal: 1050;
@z-popover: 1060;
@z-tooltip: 1070;
